<template lang="html">
  <div class="list">
    <v-toolbar absolute>
      <v-btn icon @click="goback">
        <v-icon>fa-arrow-left</v-icon>
      </v-btn>

      <v-toolbar-title v-html="title"></v-toolbar-title>

      <v-spacer></v-spacer>

      <a v-html="addText" @click="goEdit"></a>
    </v-toolbar>
    <vue-better-scroll
    v-if="dataJson.length > 0"
    :style="{height: height}"
    class="wrapper"
    ref="scroll"
    :scrollbar="scrollbarObj"
    :pullDownRefresh="pullDownRefreshObj"
    :pullUpLoad="pullUpLoadObj"
    :startY="parseInt(startY)"
    @pullingDown="onPullingDown"
    @pullingUp="onPullingUp">
      <v-list tow-line :style="{'min-height': height}">
        <template v-if="$route.query.pageCode !== 'HR.Share'" v-for="item, index in dataJson">
          <v-list-tile @click="goEdit(item)">
            <v-list-tile-content>
              <v-list-tile-title v-html="item.FCode"></v-list-tile-title>
              <v-list-tile-sub-title v-html="item.FArea$"></v-list-tile-sub-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <v-btn icon>
                <span v-html="item.FRunStatus$"</span>
                <v-icon>fa-chevron-right</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider v-if="index < dataJson.length"></v-divider>
        </template>
        <template v-if="$route.query.pageCode === 'HR.Share'" v-for="item, index in dataJson">
          <v-list-tile @click="goDetail(item)">
            <v-list-tile-content>
              <v-list-tile-title v-html="item.FTitle"></v-list-tile-title>
              <v-list-tile-sub-title v-html="item.FCreateUserId$"></v-list-tile-sub-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <v-btn icon>
                <!-- <span v-html="item.FRunStatus$"</span> -->
                <v-icon>fa-chevron-right</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider v-if="index < dataJson.length"></v-divider>
        </template>
      </v-list>
    </vue-better-scroll>
    <v-bottom-nav
      :active.sync="bottomNav"
      :value="true"
      absolute
      color="transparent">
      <router-link class="tab-link" v-for="tab, index in tabsButton" :to="{ path: tab.url, params: {} }" @click.native="changeTitle(tab.text)">
        <v-btn color="#006cc6" flat :value="index">
          <span>{{tab.text}}</span>
          <v-icon>{{tab.icon}}</v-icon>
        </v-btn>
      </router-link>
    </v-bottom-nav>
  </div>
</template>

<script>
import {entityList} from "@/api"
import { mapGetters } from 'vuex'
import VueBetterScroll from 'vue2-better-scroll'
export default {
  data() {
    return {
      height: "0px",
      title: "列表",
      addText: "新增",
      tabsButton: [
        {text: "主页", icon: "fa-home", url: "/homepage"},
        {text: "个人中心", icon: "fa-user", url: "/profile"}
      ],
      bottomNav: 0,
      dataJson: [],
      scrollbarObj: false,
      pullDownRefreshObj: {
        threshold: 90,
        stop: 40
      },
      pullUpLoadObj: {
        threshold: 40,
        txt: {
          more: '加载更多',
          noMore: '没有更多数据了'
        }
      },
      startY: 0,
      pageSize: 20,
      pageIndex: 1
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted() {
    this.resize()
    this.loadData()
  },
  methods: {
    resize() {
      let windowHeight = window.getComputedStyle(document.querySelector('body')).height
      this.height = Number(windowHeight.replace('px', '')) - 56 - 56 + 'px'
    },
    goEdit(item) {
      let query = {}
      if (item) {
        query.FId = item.FId,
        query.pageCode = this.$route.query.pageCode
      }
      this.$router.push({
        path: "/edit",
        query: query
      })
    },
    goback() {
      this.$router.go(-1)
    },
    goDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          FId: item.FId
        }
      })
    },
    loadData(param) {
      plus.nativeUI.showWaiting() // eslint-disable-line
      const vm = this
      const url = vm.$route.query.pageCode + ".List"
      entityList.getListDataByPost(url, {
        unitCode: vm.$route.query.pageCode,
        listId: vm.$route.query.listId,
        unitId: vm.$route.query.unitId,
        employeeId: this.userInfo.id,
        pageSize: param ? param.pageSize : this.pageSize,
        pageIndex: param ? param.pageIndex : this.pageIndex
        // pageCode: vm.$route.query.pageCode + ".List"
      }).then((res) => {
        if (vm.pageIndex === 1) {
            vm.dataJson = []
            vm.dataJson = res.data.records
            vm.$refs.scroll.forceUpdate(true)
          } else {
            vm.dataJson = vm.dataJson.concat(res.data.records)
            // let temp = _.cloneDeep(vm.dataJson.concat(res.data))
            if (!_.isEmpty(res.data.records)) {
              vm.$refs.scroll.forceUpdate(true)
            } else {
              vm.$refs.scroll.forceUpdate(false)
            }
          }
        plus.nativeUI.closeWaiting() // eslint-disable-line
      })
    },
    onPullingDown () {
      this.pageIndex = 1
      this.loadData({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
    },
    onPullingUp () {
      this.pageIndex++
      this.loadData({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
    }
  }
}
</script>

<style lang="scss">
.list {
  height: 100%;
  position: relative;


  .v-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    .tab-link {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 50%;
    }
  }

  .wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
  }

  .v-list {
    // position: absolute;
    // top: 56px;
    // left: 0;
    // right: 0;
    // overflow: auto;

    &::-webkit-scrollbar {
      width: 0 !important;
    }

    span {
      color: rgb(199, 199, 204) !important;
    }

    i {
      font-size: 14px;
      margin-left: 10px;
      color: rgb(199, 199, 204) !important;
    }
  }
}
</style>
